import React, { useEffect, useState } from 'react'
import { Space, Button, Radio } from 'antd'
import { SettingOutlined } from '@ant-design/icons'
import { useDesigner, TextWidget } from '@designable/react'
import { GlobalRegistry } from '@designable/core'
import { observer } from '@formily/react'
import { loadInitialSchema, saveSchema } from '../service'
import { PageManagementWidget } from './PageManagementWidget'

export const ActionsWidget = observer(() => {
  const designer = useDesigner()
  const [pageManagementVisible, setPageManagementVisible] = useState(false)

  useEffect(() => {
    loadInitialSchema(designer)
  }, [])
  const supportLocales = ['zh-cn', 'en-us', 'ko-kr']
  useEffect(() => {
    if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
      GlobalRegistry.setDesignerLanguage('zh-cn')
    }
  }, [])

  // 处理页面管理
  const handlePageManagement = () => {
    setPageManagementVisible(true)
  }

  // 处理页面管理关闭
  const handlePageManagementClose = () => {
    setPageManagementVisible(false)
  }

  return (
    <>
      <Space style={{ marginRight: 10 }}>
        <Radio.Group
          value={GlobalRegistry.getDesignerLanguage()}
          optionType="button"
          options={[
            { label: 'English', value: 'en-us' },
            { label: '简体中文', value: 'zh-cn' },
            { label: '한국어', value: 'ko-kr' },
          ]}
          onChange={(e) => {
            GlobalRegistry.setDesignerLanguage(e.target.value)
          }}
        />
        <Button icon={<SettingOutlined />} onClick={handlePageManagement}>
          页面管理
        </Button>
        <Button type="primary" onClick={() => {}}>
          预览
        </Button>
        <Button
          onClick={() => {
            saveSchema(designer)
          }}
        >
          <TextWidget>Save</TextWidget>
        </Button>
        <Button
          type="primary"
          onClick={() => {
            saveSchema(designer)
          }}
        >
          <TextWidget>Publish</TextWidget>
        </Button>
      </Space>

      {/* 页面管理组件 */}
      <PageManagementWidget
        visible={pageManagementVisible}
        onClose={handlePageManagementClose}
      />
    </>
  )
})
